<template>
    <div class="search-warp">
        <div class="select date-time place" @click="selectCity">
            <div class="default" v-if="!searchData.centerName">考点</div>
            <div class="time" v-else>{{searchData.centerName}}</div>
            <div class="arrow">
                <uni-icons class="icon" type="bottom" size="10"/>
            </div>
        </div>

        <div class="select date-time">
            <uni-datetime-picker
                placeholder="考试日期"
                :border="false"
                type="date"
                v-model="searchData.examDate"  
                :hasOkBtn="false"
                :use-type="useType"
                :times="times"
                @disabled="disabled"
                @toggle-month="(time) => getTimes(time)"
            >
                <div class="">
                    <div class="default" v-show="!searchData.examDate">考试日期</div>
                    <div class="time" v-show="searchData.examDate">{{searchData.examDate}}</div>
                </div>
            </uni-datetime-picker>
            <div class="arrow" v-show="!searchData.examDate">
                <uni-icons class="icon" type="bottom" size="10"/>
            </div>
            <uni-icons v-show="searchData.examDate" type="clear" size="14" color="#999" @click.native="searchData.examDate = ''"/>
        </div>

        <div class="hot" @click="toggleHot">
            <view class="label" :class="{'hot-active': searchData.isHeatSort}">热度</view>
            <image v-show="!searchData.isHeatSort" class="" src="@/static/icon-hot.png"/>
            <image v-show="searchData.isHeatSort" class="" src="@/static/icon-hot-red.png"/>
        </div>
    </div>
</template>

<script>
    import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
    import UniIcons from '@/components/uni-icons/uni-icons.vue'
    import { apiGetTimes } from '@/api/memory'
    export default {
        components: {
            uniDatetimePicker,
            UniIcons
        },
        props: {
            time: {
                default: '',
                type: String
            },
            timeType: {
                default: '',
                type: String
            }
        },
        data(){
            return {
                searchData: {
                    centerName: '',
                    centerId: '',
                    examDate: '',
                    isHeatSort: false
                },
                times: []
            }
        },
        options: {
            styleIsolation: 'shared'
        },
        computed: {
            // 日历类型
            useType(){
                const type = {
                    spoken: 1,
                    computer: 2,
                    write: 3
                }
                return type[this.timeType]
            }
        },
        watch: {
            time: {
                immediate: true,
                handler(val){
                    if(val){
                        this.searchData.examDate = val
                    }
                }
            },
            searchData: {
                deep: true,
                // immediate: true,
                handler(val){
                    this.$emit('select-change', val)
                }
            }
        },
        created() {
            this.getTimes()
        },
        methods: {
            // 获取笔试可考日期
            getTimes(time){
                apiGetTimes({date: time || ''}).then(res => {
                    if(res.code == 200){
                        this.times = res.data
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            },

            show(){
                try {
                    const data = uni.getStorageSync('select-school') || {}
                    if(data.id && data.from == 'search'){
                        this.searchData.centerId = data.id
                        this.searchData.centerName = data.schoolName || data.cityName || ''
                    }else {
                        this.searchData.centerId = ''
                        this.searchData.centerName = ''
                    }
                } catch (e) {
                    console.log(e, 'err')
                }
            },
            init(){
                this.searchData =  {
                    centerName: '',
                    centerId: '',
                    examDate: '',
                    isHeatSort: false
                }
                uni.setStorageSync('select-school', '')
            },
            selectCity(){
                uni.navigateTo({
                    url: `/pages/memory/add/pages/select-place?from=search`
                })
            },
            toggleHot(){
                this.searchData.isHeatSort = !this.searchData.isHeatSort
            },
            disabled(){
                this.$tip.toast('请选择考试日期')
            },
            selectChange(val){
                this.$emit('select-change', val)
            }
        },

    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .search-warp{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: torem(20) torem(30);

        ::v-deep .select{
            min-width: torem(200);
            background-color: #fff;
            .uni-select,.uni-select__input-box{
                height: torem(58) !important;
            }
            .uni-select{
                border: none;
                position: relative;
                .uniui-bottom,.uniui-top{
                    font-size: 10px !important;
                    color: #333 !important;
                    width: torem(22);
                    height: torem(22);
                    background-color: #EFEFEF;
                    box-sizing: border-box;
                    border-radius: 50%;
                    display: inline-block;
                    line-height: 14px;
                    margin-top: torem(-6);
                }
            }
            .uni-date-x.uni-date-single .uni-date__input{
                height: torem(58) !important;
                line-height: torem(58) !important;
            }
            .uni-date__icon-logo{
                display: none;
            }
            .uni-select__input-placeholder,.uni-date__input[placeholder]{
                font-size: torem(24) !important;
                color: #999 !important;
            }
            .uni-select__input-text{
                font-size: torem(24);
                color: #333;
            }
            
        }
        .date-time{
            // min-width:torem(200);
            flex: 1;
            height: torem(58);
            background-color: #fff;
            border-radius: torem(10);
            padding: torem(17) torem(10);
            box-sizing: border-box;
            font-size: torem(24) !important;
            color: #999 !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 torem(20);
            .time{
                color: #333;
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden; /* 隐藏超出容器的文本 */
                text-overflow: ellipsis; /* 超出部分显示为省略号 */
                flex: 1;
            }
            .arrow{
                width: torem(22);
                height: torem(22);
                background-color: #EFEFEF;
                box-sizing: border-box;
                border-radius: 50%;
                position: relative;
                color: #333;
                .icon{
                    display: inline-flex;
                    position: absolute;
                    left: 50%;
                    top:50%;
                    transform: translate(-50%,-50%);
                }
                
            }
        }
        .place{
            // width: torem(300);
            flex: 1.5;
            margin: 0;
        }
        .hot{
            display: inline-flex;
            align-items: center;
            color: #999;
            font-size: torem(24);
            background-color: #fff;
            padding: torem(16) torem(14);
            border-radius: torem(10);
            height: torem(58);
            box-sizing: border-box;
            image{
                width: torem(15);
                height: torem(18);
                margin-left: torem(16);

            }
        }
        .hot-active{
            color: #333;
        }
    }
 
</style>